library(dplyr)library(tidyr)library(shiny)library(plotly)library(leaflet)library(haven)ess <-readRDS("../../../data/ess_trust.rds")ess_geo <-readRDS("../../../data/ess_trust_geo.rds")# UI ----ui <-fluidPage(titlePanel("European Social Survey - round 10"),## Sidebar ----sidebarLayout(sidebarPanel(### select dependent variableselectInput("xvar",label ="Select a dependent variable",choices =c("Trust in country's parliament"="trust_parliament","Trust in the legal system"="trust_legal","Trust in the police"="trust_police","Trust in politicians"="trust_politicians","Trust in political parties"="trust_parties","Trust in the European Parliament"="trust_eu","Trust in the United Nations"="trust_un" ) ),### select a variable ----selectInput("yvar",label ="Select an independent variable",choices =c("Placement on the left-right scale"="left_right","Age"="age","Feeling about household's income"="income_feeling","How often do you use the internet?"="internet_use","How happy are you?"="happiness" ) ),### select a country ----selectizeInput("countries",label ="Filter by country",choices =unique(ess$country),selected ="FR",multiple =TRUE ),### filter values ----sliderInput("range",label ="Set a value range",min =min(ess$trust_parliament, na.rm =TRUE),max =max(ess$trust_parliament, na.rm =TRUE),value =range(ess$trust_parliament, na.rm =TRUE),step =1 ) ),## Main panel ----mainPanel(tabsetPanel(type ="tabs",### Table tab ----tabPanel(title ="Table",div(style ="height: 600px; overflow-y: auto;",tableOutput("table") ) ),### Plot tab ----tabPanel(title ="Histogram",plotlyOutput("plot", height =600) ),### Map tab ----tabPanel(title ="Map",leafletOutput("map", height =600) ) ) ) ))# Server ----server <-function(input, output, session) {# update slider ----observe({ var <-na.omit(ess[[input$xvar]]) is_ordered <-is.ordered(var) var <-as.numeric(var)updateSliderInput(inputId ="range",min =min(var),max =max(var),value =range(var),step =if (is_ordered) 1 ) }) %>%bindEvent(input$xvar)# filter data ---- filtered <-reactive({req(input$countries, cancelOutput =TRUE) xvar <- input$xvar yvar <- input$yvar range <- input$range# select country ess <- ess[ess$country %in% input$countries, ]# select variable ess <- ess[c("idno", "country", xvar, yvar)]# apply range ess <- ess[ess[[xvar]] > range[1] & ess[[xvar]] < range[2], ] ess })# render table ---- output$table <-renderTable({filtered() }, height =400)# render plot ---- output$plot <-renderPlotly({ xvar <- input$xvar yvar <- input$yvar plot_data <-filtered() %>%drop_na() %>%mutate(across(where(is.numeric), .fns = as.ordered)) p <-ggplot(plot_data) +aes(x = .data[[xvar]], y = .data[[yvar]], group = .data[[xvar]]) +geom_violin(fill ="lightblue", show.legend =FALSE) +theme_classic()ggplotly(p) })}shinyApp(ui = ui, server = server)
Exercises
Note
Exercise 1
Thinking back to our initial visualization structure (data selection, data exploration, data modelling, ???), what could be a good last step? What type of visualization can enhance our understanding of the relationship among the Guerry variables? Write down your ideas along with possible types of visualizations.
The respective plotly functions are plotly::plotlyOutput() and plotly::renderPlotly()
Note
Exercise 4
Implement the visualization from exercise 1 within the new box from exercise 2. Create your plot using ggplot2 and convert it to a plotly chart using ggplotly()
Note
Exercise 5
Remove all mode bar buttons except “Zoom in” and “Zoom out” from the new visualization of exercise 4
Tip
The relevant function is plotly::config()
Call schema() and explore object -> config to find out about ways to remove mode bar buttons
A list of modebar buttons is provided on Plotly’s GitHub repository or under object -> layout -> layoutAttributes -> modebar -> remove
Warning
Solution
To remove modebar buttons, we need to change the plotly::config() of the generated plot output:
Change the axis width of the new graph from exercise 4 to 5 pixels and color to #000
Note
The relevant function is plotly::layout()
Call schema() and explore object -> layout -> layoutAttributes to find out about ways to change the axis layout
Warning
Solution
To change the axis width, we need to change the plotly::layout() of the plotly object. Determining which option controls the axis layout is a tricky question. To do that, we can explore the plotly::schema(). In this case, the relevant option is found unter object -> layout -> layoutAttributes -> xaxis/yaxis -> linewidth/linecolor. Then, just add a layout to the plot object and change the relevant options:
Currently, we have three input widgets to change the appearance of plots: model_x, model_y, and model_std. Implement another input widget that allows users to manipulate the data, output or the plot appearance.
Tip
Should the new input widget change all plots or just a selection of plots? Should the new widgets control the way data is cleaned (e.g. normalising), analysed (e.g. different modelling approaches) or displayed (e.g. plot theming)?